<template>
  <div class="contentmain">
      <el-row>
          <el-col :span="24">
              <el-form>
                  <el-form-item>
                        <el-input v-model="searchphone" placeholder="客户手机号码" style="width:20%"></el-input>
                        <!-- <el-date-picker
                            v-model="datetime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker> -->
                        <el-button type="primary" icon="el-icon-search" @click="search">搜素</el-button>
                  </el-form-item>
              </el-form>
          </el-col>
      </el-row>

    <el-table :data="t" stripe style="width: 100%" tooltip-effect="dark" v-loading="loading" element-loading-text="数据加载中...">
        <el-table-column prop="customerMobile" label="客户手机号码">
        </el-table-column>
        <el-table-column prop="customerNickname" label="系统昵称">
        </el-table-column>
        <el-table-column prop="i" label="微信信息">
            <template slot-scope="scope">
                <div v-if="scope.row.thirdPartLogin != null">
                    <img v-if="scope.row.thirdPartLogin.headImageUrl != null" class="line-image" :src="scope.row.thirdPartLogin.headImageUrl" style="width:50px;vertical-align: middle;">
                    <span v-if="scope.row.thirdPartLogin.nickName != null">{{scope.row.thirdPartLogin.nickName}}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="账户余额">
            <template slot-scope="scope">
                <span v-if="scope.row.deposit != null">{{scope.row.deposit.preDeposit}}</span>
            </template>
        </el-table-column>
        <el-table-column label="注册时间">
            <template slot-scope="scope">
                {{new Date(scope.row.createTime).toLocaleString().replace(/:\d{1,2}$/,' ')}}
            </template>
        </el-table-column>
        <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">交易记录</el-button>
        <el-button size="mini" @click="sendcoupon(scope.$index, scope.row)" v-if="shiro">发优惠券</el-button>
        <el-button size="mini" @click="withDrawal(scope.$index, scope.row)" v-if="shiroItem.caiwu">提现</el-button>
      </template>
    </el-table-column>
    </el-table>


    <el-row>
        <el-col :span="8" :offset="16">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="10"
              layout="total, prev, pager, next, jumper"
              :total="count">
            </el-pagination>
        </el-col>
      </el-row>

      <CustomerData>
        </CustomerData>
    <CouListPush @getcousid="getcousid"/>
  </div>
</template>
<script>
import CustomerData from 'components/CustomerData/CustomerData'
import CouListPush from 'components/Coupon/CouListPush'
import moment from 'moment'
    export default{
        data(){
            return{
                t:[],
                searchphone:'',
                currentPage:1,
                count:0,
                loading:false,
                datetime:'',
                sendcouponuserid:-1,
                shiro:this.$store.state.shiro,
                shiroItem:this.$store.state.shiroitem
            }
        },
        components:{
            CustomerData,
            CouListPush
        },
        mounted(){
            this.getData()
        },
        activated(){
            this.sendcouponuserid=-1
        },
        deactivated(){
            this.sendcouponuserid=-1
        },
        methods:{
            handleEdit(i,r){//查询客户的交易记录
                this.$store.commit('ChangeCusData',r)
            },
            handleSizeChange(i){//翻页
                var p=new URLSearchParams()
                p.append('pageNo',i)
                this.getData(p)
            },
            handleCurrentChange(i){//翻页
                var p=new URLSearchParams()
                p.append('pageNo',i)
                this.getData(p)
            },
            search(){//查询
                var pp=new URLSearchParams()
                if(this.searchphone){
                    pp.append('customerMobile',this.searchphone)
                }
                this.getData(pp)
            },
            sendcoupon(i,r){//打开发送优惠券的弹窗
                if(this.$store.state.shiro){
                    this.sendcouponuserid=r.customerId
                    this.$store.commit('ChangeCouLists')
                }
            },
            getcousid(m){//获取优惠券id发放优惠券
                var _this=this
                var pa=new URLSearchParams()
                pa.append('userId',this.sendcouponuserid)
                pa.append('couponId',m)
                axios.get('/giveCoupon.do',{params:pa}).then(r=>{
                    if(r.data.code==200){
                        _this.$message.success('发送成功')
                    }else{
                        _this.$message.error(r.data.message)
                    }
                })
            },
            withDrawal(i,r){//提现
                var _this=this
                if(!this.$store.state.shiro){return}
                if(!this.$store.state.shiroitem.caiwu){return}
                this.$confirm('确定要提现？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    var pp=new URLSearchParams()
                    pp.append('customerMobile',r.customerMobile)
                    axios.get('/reflectDeposit.do',{params:pp}).then(r=>{
                        if(r.data.code==200){
                            _this.$message({
                                type: 'success',
                                message: '提现成功!'
                            });
                        }else{
                            _this.$message.error(r.data.message)
                        }
                    })
                })
            },
            getData(v){//统一获取数据填入表格
                var _this=this
                this.loading=true
                axios.post('/listCustomer.do',v).then(r=>{
                    // console.log("用户记录",r)
                    if(r.data.code==200){
                        _this.t=[].concat(r.data.response.customerList)
                        _this.count=r.data.response.page.totalCount
                    }else{
                        if(r.data.message=="not login"&&r.data.code==500){
                            _this.$message.error("访问者,请登录")
                            router.push('/Login');
                            return
                        }
                        _this.$message.error(r.data.message)
                    }
                    _this.loading=false
                })
            }
        }
    }
</script>
<style>
</style>
